import { useEffect, useState } from 'react';
import { isArray } from 'esy-ui';
import { Swiper } from '@/components';
import { postBanner } from '@/services';
import { useGlobalStore } from '@/mobx';

const defList = [
  {
    url: 'http://47.236.177.54:55012/StaticFiles/Other/20240409100026945.jpg',
    id: 1,
  },
  {
    url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
    id: 2,
  },
];

function Banner() {
  const [list, setList] = useState(defList);
  const { changeState } = useGlobalStore();

  useEffect(() => {
    changeState('isLoading', true);
    postBanner()
      .then((res?: any) => {
        if (isArray(res?.data)) {
          setList(res?.data);
        }
      })
      .catch(() => {})
      .finally(() => {
        changeState('isLoading', false);
      });
  }, [changeState]);

  return (
    <div className='text-center'>
      <Swiper className='h-52' list={list} loop />
    </div>
  );
}

export default Banner;
